<template>
    <view class="tabs">
        <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
            <view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
                <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
            </view>
        </scroll-view>
        <view class="line-h"></view>
		<view class="uni-list">
			<view v-for="(value, index) in listData" :key="index" class="box">
				<view class="box-head">
					<view>{{brandName}}</view>
					<view class="status">{{value.status_text}}</view>
				</view>
				<view class="box-info">
					<image :src="value.goods.image" mode=""></image>
					<view class="title">{{value.goods.title||'商品已下架'}}</view>
					<view class="price">
						<view>{{value.goods.price||"0.00"}}</view>
						<view class="number">x{{value.number}}</view>
					</view>
				</view>
				<view class="box-time">
					{{value.goods.content||''}}
				</view>
			</view>
		</view>
    </view>
</template>
<script>
	let App = getApp()
    export default {
		data() {
			return {
				listData: [],
				tabIndex: 0,
				tabBars: [{
				    name: '全部',
				    id: 'all'
				}, {
				    name: '待付款',
				    id: 'no'
				}, {
				    name: '待发货',
				    id: 'yes'
				}, {
				    name: '已发货',
				    id: 'ok'
				}],
				page:1,
				brandName:''
			};
		},
		onLoad() {
			this.brandName = App.globalData.name
			this.getList(this.page,this.tabIndex);
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			this.getList(this.page*1+1,this.tabIndex);
		},
		methods: {
			getList(page,index) {
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getOrder')({
					'uid':userinfo.id,
					'page':page,
					'status':index
				}).then(res=>{
					if(res.code == 200){
						this.listData =  this.listData.concat(res.data.list)
						this.page = res.data.page
					}
					uni.hideLoading()
				})
			},
			
			ontabtap(e) {
			    let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index
				this.page=1;
				this.listData = []
			    this.getList(this.page,index);
			}
		}
    }
</script>

<style lang="less">

    page {
        width: 100%;
        min-height: 100%;
        display: flex;
    }

    .tabs {
        flex: 1;
        flex-direction: column;
        overflow: hidden;
    }

    .scroll-h {
		background-color: #FFFFFF;
        width: 750rpx;
		/* #ifdef H5 */
		width:100%;
		/* #endif */
		height: 80rpx;
        flex-direction: row;
		position: fixed;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }

    .line-h {
		width: 750rpx;
        height: 1rpx;
        background-color: #cccccc;
		position: fixed;
		top: 81rpx;
    }
	
	.uni-list{
		margin-top: 81rpx;
	}

    .uni-tab-item {
        /* #ifndef APP-PLUS */
        display: inline-block;
        /* #endif */
        flex-wrap: nowrap;
        padding-left: 50rpx;
        padding-right: 50rpx;
    }

    .uni-tab-item-title {
        color: #555;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        flex-wrap: nowrap;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }

    .uni-tab-item-title-active {
		font-weight: bold;
        color: #ff5528;
    }
	
	.box{
		padding: 20rpx;
		box-sizing: border-box;
		width: 96%;
		height: 300rpx;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	
	.box-head{
		display: flex;
		justify-content: space-between;
	}
	
	.box-head .status{
		color: #ff5528;
	}
	
	.box-info{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.box-info image{
		width: 20%;
		height:127rpx ;
	}
	
	.box-info .number{
		text-align: end;
	}
	
	.box-info .title{
		width: 60%;
		text-align: left;
	}
	
	.box-time{
		margin-top: 20rpx;
		font-size: 30rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #999999;
	}
	
</style>
